<template>
  <view class="content">
    <!-- 收货地址 -->
    <my-address></my-address>
    <!-- 标题 -->
    <view class="content-title">
      <uni-icons
        type="shop"
        size="18"
      ></uni-icons>
      <text class="content-title-text">购物车</text>
    </view>
    <!-- 商品列表 -->
    <uni-swipe-action v-if="cart.length > 0">
      <block
        v-for="(item, index) in cart"
        :key="index"
      >
        <uni-swipe-action-item
          :right-options="options"
          @click="handledeleteGoods(item)"
        >
          <goodsItem
            :item="item"
            isShowRadio
            isShowNumber
            @radio-change="radioChangeHandler"
            @count-change="changeCount"
          ></goodsItem>
        </uni-swipe-action-item>
      </block>
    </uni-swipe-action>
    <view class="content-emptyCart" v-else>
      <image :src="defaultPic"></image>
      <text>空空如也</text>
    </view>
    <!-- 结算区域 -->
    <my-settle></my-settle>
  </view>
</template>

<script>
import cartBadge from "@/mixins/cartTabbar-badge.js";
import { mapState, mapMutations } from "vuex";
export default {
  mixins: [cartBadge],
  data() {
    return {
      options: [
        {
          text: "删除",
          style: {
            backgroundColor: "#C00000",
          },
        },
      ],
      defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png' //当购物车为空是显示的图片
    };
  },
  computed: {
    ...mapState("m_cart", ["cart"]),
  },
  onLoad() {},
  methods: {
    ...mapMutations("m_cart", ["updataGoodsState", "updataGoodsCount","deleteGoods"]),
    // 监听组件发送过来的radio-change事件，获取当前商品的id和状态，改变其状态
    radioChangeHandler(goods) {
      this.updataGoodsState(goods);
    },
    // 更新count
    changeCount(goods) {
      this.updataGoodsCount(goods);
    },
    // 刪除商品
    handledeleteGoods(goods) {
      this.deleteGoods(goods);
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  padding-bottom: 50px;
  &-title {
    height: 40px;
    display: flex;
    align-items: center;
    font-size: 14px;
    padding: 5px;
    border-bottom: 1px solid #efefef;

    &-text {
      margin-left: 10px;
    }
  }
  &-emptyCart {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 150px;
    
    image {
      width: 90px;
      height: 90px;
    }
    text {
      font-size: 12px;
      color: gray;
      margin-top: 15px;
    }
  }
}
</style>
